/***
 * 
 */
define( [ 'Vue', 'axios' ], function ( Vue, axios ) {
    return Vue.component('system-info', {
        data : function() {
            return {
                systemInfo : { } 
            };
        },

        mounted : function () {
            var _this = this;
            axios.get( 'system-info.json?host=' + _this.$route.query.host +'&port=' +_this.$route.query.port ) .then(function (response) {
                _this.systemInfo = response.data;
            });
        },

        template : `
            <div>
                <a>GraphData</a>
                <a href="#/">INDEX PAGE</a>
                <h2>IP</h2>
                <div>192.168.4.15</div>
                <div>127.0.0.1</div>

                <h2>Memory</h2>
                <div v-for="(value, key, index) in systemInfo.memory">{{key}} = {{value}} B = {{value/1024}} KB = {{value/1024/1024}} MB = {{value/1024/1024/1024}} GB</div>

                <h2>Thread</h2>
                <div v-for="(value, key, index) in systemInfo.thread">{{key}} = {{value}}</div>

                <h2>Disk</h2>
                <ol>
                    <li v-for="(value, key, index) in systemInfo.diskSpaces">
                        {{value.canonicalPath}}
                        <br />
                        Total: {{value.totalSpace}} B = {{value.totalSpace/1024}} KB = {{value.totalSpace/1024/1024}} MB = {{value.totalSpace/1024/1024/1024}} GB
                        <br />
                        Usable: {{value.usableSpace}} B = {{value.usableSpace/1024}} KB = {{value.usableSpace/1024/1024}} MB = {{value.usableSpace/1024/1024/1024}} GB
                        <br />
                        Free: {{value.freeSpace}} B = {{value.freeSpace/1024}} KB = {{value.freeSpace/1024/1024}} MB = {{value.freeSpace/1024/1024/1024}} GB
                        <br />
                        <br />
                    </li>
                </ol>
            </div>
        `
    });
});